<template>
  <div class="" id="job-group-table">
    <el-table
      :data="[]"
      id="job-group-header"
      style="width: 100%">
      <el-table-column
        prop="index"
        label="序号"
        align="center"
        type="index"
        width="60">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="position"
        label="现从事岗位"
        width="140">
      </el-table-column>
      <el-table-column
        prop="fteSchoolProfession"
        label="毕业院校及专业"
        >
      </el-table-column>
      <el-table-column
        prop="declareType"
        label="申报类型"
        width="80">
      </el-table-column>
      <el-table-column
        prop="verifyStatus"
        label="申报状态"
        align="center"
        width="110">
      </el-table-column>
      <el-table-column
        prop="ctime"
        label="申报时间"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        label="审核意见"
        width="100"
        align="center"
        @click.stop>
      </el-table-column>
      <el-table-column
        label="操作"
        width="80"
        align="center">
      </el-table-column>
    </el-table>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item :name="index" v-for="(tdata, index) in tableData" :key="index">
        <template slot="title">

          <strong>{{tdata.enterprise.ctime ? $formatDateTime(tdata.enterprise.ctime) : ''}}</strong>&nbsp;&nbsp;&nbsp;
          <span style="margin-left: 10px;" v-if="tdata.enterprise.contactsName">公司联系人：{{tdata.enterprise.contactsName}}</span>&nbsp;&nbsp;&nbsp;
          <span style="margin-left: 10px;" v-if="tdata.enterprise.contactsPhone">联系电话：{{tdata.enterprise.contactsPhone}}</span>
          <!-- <span style="margin-left: 10px;" v-if="tdata.enterprise.contactsPhone">附件：
            <a :href="getUrl(tdata.enterprise.attachment)"
              style="color: #94C05A;" @click.stop=""
            >{{getName(tdata.enterprise.attachment)}}</a>
          </span> -->
          <el-button type="text" class="job-group-btn"  @click.stop.native="submit(tdata)">
            <img src="../../assets/shangchuan.png" alt="">
            批量上报
          </el-button>
          <el-button type="text" class="job-group-btn"  @click.stop.native="exportExcel(tdata)" style="margin-left: 0;">
            <img src="../../assets/export.png" alt="">
            导出Excel
          </el-button>
          <el-tooltip :content="getName(tdata.enterprise.attachment)" placement="top" effect="light">
            <a :href="getUrl(tdata.enterprise.attachment)" class="job-group-btn"  @click.stop target="_blank" v-if="tdata.enterprise.contactsPhone">
              <img src="../../assets/fujian.png" alt="">
              查看附件
            </a>
          </el-tooltip>

        </template>
        <el-table
          :data="tdata.people | filtercon(filterStr)"
          style="width: 100%;"
          :show-header="false"
          @row-click="tableChange($event, tdata.enterprise)">
          <el-table-column
            prop="index"
            label="序号"
            align="center"
            type="index"
            width="60">
          </el-table-column>

          <el-table-column
            prop="username"
            label="姓名"
            width="100">
          </el-table-column>

          <el-table-column
            prop="position"
            label="现从事岗位"
            width="140">
          </el-table-column>

          <el-table-column label="毕业院校及专业">
            <template slot-scope="scope">
              <span>{{scope.row.fteSchoolProfession || scope.row.weSchoolProfession}}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="declareType"
            label="申报类型"
            align="center"
            width="80">
            <template slot-scope="scope">
              <el-tag
                :type="declaretype(scope.row.declareType)[0]"
                disable-transitions>{{declaretype(scope.row.declareType)[1]}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
          
            prop="verifyStatus"
            label="申报状态"
            align="center"
            width="110">
            <template slot-scope="scope">
              <el-tag
                :type="verifystatus(scope.row.verifyStatus, scope.row.saveSubmit, scope.row.expertResult)[0]"
                disable-transitions>{{verifystatus(scope.row.verifyStatus, scope.row.saveSubmit, scope.row.expertResult)[1]}}</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="ctime"
            label="申报时间"
            align="center"
            width="180">
            <template slot-scope="scope">
              {{$formatDateTime(scope.row.ctime)}}
            </template>
          </el-table-column>


          <el-table-column
            label="审核意见"
            width="100"
            align="center"
            @click.stop>
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top" v-if="scope.row.reason">
                <p>{{scope.row.reason}}</p>
                <div slot="reference" class="name-wrapper" @click.stop>
                  查看意见
                </div>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            width="80">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top" v-if="!tdata.enterprise.ctime">
                <span>删除</span>
                <i class="el-icon-delete" slot="reference" @click.stop="deleteRow(scope.row)" ></i>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    name: 'jobapp-group',
    title: '申请列表',
    props: {
      offset: {},
      limit: {},
      sort: {},
      order: {},
      data: {},
      total: {}
    },
    data() {
      return {
        filterStr: '全部',
        tableData: [],
        // pageSize: 15,
        // currentPage : 0,
        // listtotal: 0,
        activeNames: ['1']
      }
    },
    mounted () {
      // this.pageSize = this.limit
      // this.currentPage = this.offset
      this.tableData = this.data
      this.openAll()
    },
    methods: {
      openAll () {
        let os = []
        for (var i = 0; i < this.tableData.length; i++) {
          os.push(i)
        }
        this.activeNames = os
      },
      tableChange (row, ec) {
        this.$emit('selected', Object.assign({}, ec, row))
        // this.currentRow = val;
      },
      declaretype (str) {
        if (str === 'REVIEW') return ['', '评审']
        else if (str === 'HOLD') return ['success', '认定']
        else if (str === 'UNUSUAL') return ['info', '破格']
      },
      /**
       * str: verifyStatus, 初审状态(WAIT 代表待审核;SUCCESS 代表审核成功;FAIL 代表审核失败)
       * str2: SaveSubmit,保存或提交状态： SAVE 保存未提交; SUBMIT 已提交
       * str3: expertResult,专家结果(WAIT 代表待审核;SUCCESS 代表审核成功;FAIL 代表审核失败)
       * // 流程解释
       * 1. 表单填写，保存，此时处于未提交状态
       * 2. 提交表单，进入待审核状态
       * 3. 初审失败，将表单打回
       * 4. 已审核，初审成功，进入专家待审核状态，也就是所谓得已审核
       * 5. 终审位通过，专家审核失败
       * 6. 已通过，专家审核通过
       */
      verifystatus (str, str2, str3) {
        // 1. 未提交, SaveSubmit === 'SAVE' 
        // 2. 待审核, verifyStatus === 'WAIT'
        // 3. 初审未通过 verifyStatus === 'FAIL'
        // 4. 已审核, verifyStatus === 'SUCCESS'
        // 5. 已审核, expertResult === 'WAIT'
        // 6. 终审未通过 expertResult === 'FAIL'
        // 7. 已通过 expertResult === 'SUCCESS'
        if (str2 === 'SAVE') return ['warning','未提交']
        else if (str === 'WAIT') return ['primary', '待审核']
        else if (str === 'FAIL') return ['danger', '初审未通过']
        else if (str3 === 'FAIL') return ['info', '终审未通过']
        else if (str3 === 'SUCCESS') return ['success', '已通过']
        else if (str3 === 'WAIT' || str === 'SUCCESS') return ['first-success', '已审核']
        else return [] // 位防止程序出错
      },
      handleChange(val) {},
      modifyFilter (str) {
        this.filterStr = str
      },
      getUrl (objStr) {
        if (objStr) {
          return JSON.parse(objStr)[0].url
        }

      },
      getName (objStr) {
        if (objStr) {
          return JSON.parse(objStr)[0].name
        }
      },
      // 分批次，批量上报
      submit (data) {
        let issb = false
        for (var i = 0; i < data.people.length; i++) {
          if (this.verifystatus(data.people[i].verifyStatus, data.people[i].saveSubmit)[1] === '未提交') {
            issb = true
            break
          }
        }
        if (!issb) {
          this.$message({
            showClose: true,
            message: '无待上报数据',
            type: 'warning'
          })
          return
        }
        if (data.enterprise) {
          // 有公司信息 弹框自动填写公司信息
          this.$emit('submit-all', data.enterprise)
        } else {
          // 没有公司信息
          // 先弹框提醒
          this.$alert('批量上传后,就不可在本组添加申请人', {
            confirmButtonText: '确定',
            callback: action => {
              if (action === 'confirm') {
                this.$emit('submit-all')
              }
            }
          })
        }
      },
      deleteRow (row) {
        this.$confirm(`此操作将永久删除${row.username}的职称评审表, 再次申请需要重新填写表单，是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/mscs/review/delReviewById', this.$paramsConvert({reviewId: row.reviewId})).then(res => {
            if (res.data.code === 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.$emit('delete-row-success')
            } else {
              this.$codeError(res)
            }
          }).catch(error => {
            this.$catchError(error)
          })
        }).catch(() => {})
      },
      exportExcel (data) {
        let obj = []
        data.people.forEach((item, index) => {
          obj.push({
            index: index + 1,
            username: item.username,
            sex: item.sex === '1' || item.sex === 1 ? '男' : '女',
            birthday: this.$formatYMD(item.birthday),
            toWorkTime: this.$formatYMD(item.toWorkTime),
            fteSchoolProfession: item.fteSchoolProfession || item.weSchoolProfession,
            fullTimeEducation: item.fullTimeEducation || item.workEducation,
            position: item.position,
            reason: ''
          })
        })
        let params = {
          filePath: 'http://cdn.i-tudou.com/document/positional-titles-enterprise-list.xlsx',
          statisticsData: JSON.stringify(obj)
        }
        axios.post('/mscs/review/exportStatisticsExcel', this.$paramsConvert(params),{responseType: 'arraybuffer'}).then(res => {
          const content = res.data
          const blob = new Blob([content], {type: "application/vnd.ms-excel"})
          const fileName = '职称评审汇总表.xlsx'
          if ('download' in document.createElement('a')) { // 非IE下载
            const elink = document.createElement('a')
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
            // let objectUrl = URL.createObjectURL(blob)
            // window.location.href = objectUrl
          } else { // IE10+下载
            navigator.msSaveBlob(blob, fileName)
          }
        }).catch(error => {
          this.$catchError(error)
        })
      }
    },
    // 对筛选条件进行过滤
    filters: {
      filtercon (value, str) {
        if (str === '全部') {
          return value
        }
        let v = []
        value.forEach(item => {
          let status
          if (!item.verifyStatus) status = '未提交'
          else if (item.verifyStatus === 'WAIT' && item.saveSubmit === "SAVE") status = '未提交'
          else if (item.verifyStatus === 'WAIT' && item.saveSubmit !== "SAVE") status = '待审核'
          else if (item.verifyStatus === 'SUCCESS' && (!item.expertResult || item.expertResult === 'WAIT')) status = '已审核'
          else if (item.verifyStatus === 'FAIL' || item.expertResult === 'FAIL') status = '未通过'
          else if (item.expertResult === 'SUCCESS') status = '已通过'
          if (status === str) {
            v.push(item)
          }
        })
        return v
      }
    },
    watch: {
      'data' : {
        handler () {
          this.tableData = this.data
          this.openAll()
        },
        deep: true
      },
      // 'total' () {
      //   this.listtotal = this.total
      // }
    },
    // computed: {
    //   height () {
    //     let he = this.$store.state.height.client - this.$store.state.height.header - this.$store.state.height.footer - 150
    //     if (he < 300) {
    //       he = 300
    //     }
    //     return he
    //   }
    // }
  }
</script>
<style>
  .el-tag--first-success {
    background-color: rgba(0,99,82,.1);
    border-color: rgba(0,99,82,.2);
    color: #006352;
  }
  .list-page {
    line-height: 35px;
  }
  .list-page > span {
    font-size: 13px;
    color: #999999;
  }
  .job-group-btn {
    float: right;
    height: 40px!important;
    color: #698841!important;
    line-height: 40px!important;
    padding: 0!important;
    background-color: #d2e1bf!important;
    border-left: 1px solid #c3d0b3!important;
    border-radius: 0!important;
    padding: 0 10px!important;
    text-decoration: none!important;
  }
  .job-group-btn img {
    position: relative;
    /* 加入bootstrap后不须用 */
    /* top: 3px; */
  }
  #job-group-header .el-table__empty-block {
    display: none;
  }
  #job-group-table .el-collapse-item__header{
    background-color: #E4EED8;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    border: 1px solid #c3d0b3;
  }
  #job-group-table .el-collapse-item__arrow {
    line-height: 40px;
    display: none;
  }
  #job-group-table .el-collapse-item {
    margin-bottom: 10px;
  }
  #job-group-table .el-collapse {
    border: none;
  }
  #job-group-table .el-collapse-item__wrap {
    border: none;
  }
  #job-group-table .el-dropdown {
    font-size: 16px;
  }
  #job-group-table .el-button--text {
    color: #94C05A;
  }
  #job-group-table .btn-hover-green .el-button:focus, .el-button:hover {
    border-color: transparent;
  }
  #job-group-table .el-collapse-item > div {
    clear: both;
  }
</style>
